<template>
  <!-- <a-descriptions title="糖尿病概况" bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
    <a-descriptions-item label="糖尿病诊断" :span="report.ifDiabetesText == '已确诊' ? 1 : 2">
      {{ report.ifDiabetesText }}
    </a-descriptions-item>
    <template v-if="report.ifDiabetesText == '已确诊'">
      <a-descriptions-item label="确诊日期" :span="1">
        {{ report.diabetesDiagnoseDate }}
      </a-descriptions-item>
      <a-descriptions-item label="糖尿病类型" :span="2">
        {{ report.diabetesTypeText }}
      </a-descriptions-item>
      <a-descriptions-item label="起病类型" :span="2">
        {{ report.diabetesOnsetSymptom }}
      </a-descriptions-item>
      <a-descriptions-item label="用药类型" :span="2">
        {{ report.drugType }}
      </a-descriptions-item>
      <a-descriptions-item label="空腹血糖" :span="1">
        {{ report.sugarBreakfastBefore }}
      </a-descriptions-item>
      <a-descriptions-item label="早餐后血糖" :span="1">
        {{ report.sugarBreakfastAfter }}
      </a-descriptions-item>
      <a-descriptions-item label="午餐前血糖" :span="1">
        {{ report.sugarLunchBefore }}
      </a-descriptions-item>
      <a-descriptions-item label="午餐后血糖" :span="1">
        {{ report.sugarLunchAfter }}
      </a-descriptions-item>
      <a-descriptions-item label="晚餐前血糖" :span="1">
        {{ report.sugarSupperBefore }}
      </a-descriptions-item>
      <a-descriptions-item label="晚餐后血糖" :span="1">
        {{ report.sugarSupperAfter }}
      </a-descriptions-item>
      <a-descriptions-item label="睡前血糖" :span="1">
        {{ report.sugarSleepBefore }}
      </a-descriptions-item>
      <a-descriptions-item label="凌晨血糖" :span="1">
        {{ report.sugarSleepAfter }}
      </a-descriptions-item>
      <a-descriptions-item label="糖化血红蛋白" :span="1">
        {{ report.hba1c }}
      </a-descriptions-item>
      <a-descriptions-item label="日血糖波动幅度" :span="1">
        {{ report.sugarWave }}
      </a-descriptions-item>

      <a-descriptions-item label="糖尿病家族史" :span="1">
        早发性心血管疾病家族史：{{ report.familyHistoryPrematureAngioText }}
        <a-divider />
        2型糖尿病家族史：{{ report.familyHistoryDiabetes2Text }}
      </a-descriptions-item>
    </template>
  </a-descriptions> -->
  <div class="container">
    <div style="">
      <div class="card_nd_title">
        <span>糖尿病概况</span>
        <div class="line" style="width:80px;"></div>
      </div>
      <div class="card_content">
        <a-row>
          <a-col :span="10">
            <div class="item">
              <span style="margin-right:50px;font-size: 16px;color: #000;">糖尿病诊断</span>
              <a-badge color="red" /><span style="font-size:12px">已确诊</span>
            </div>
            <div class="item">
              <span>确诊日期：{{ report.diabetesDiagnoseDate }}</span>
            </div>
            <div class="item">
              <span>糖尿病类型：{{ report.diabetesTypeText }}</span>
            </div>
            <div class="item">
              <span>用药类型：{{ report.drugType }}</span>
            </div>
            <a-row class="item">
              <a-col :span="colspan.left">起病类型：</a-col>
              <a-col :span="colspan.right">{{ report.diabetesOnsetSymptom }}</a-col>
            </a-row>
            <a-row>
              <a-col style="display: flex;flex-direction: column;align-items: center;">
                <span>糖化血红蛋白</span>
                <h1 v-if="report.hba1c">{{ report.hba1c }}</h1>
                <a-progress
                  type="circle"
                  :percent="Number(report.hba1c && report.hba1c.replace('%', ''))"
                  :showInfo="false"
                ></a-progress>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="14">
            <div class="suger_title">血糖数据</div>
            <bar-charts :xAxisData="xAsix" :seriesData="series"></bar-charts>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import barCharts from '../../components/barChart'
export default {
  name: 'Overview',
  props: ['report'],
  components: { barCharts },
  data() {
    return {
      xAsix: ['空腹血糖', '早餐后血糖', '午餐前血糖', '午餐后血糖', '晚餐前血糖', '晚餐后血糖', '睡前血糖', '凌晨血糖'],
      series: [],
      colspan: {
        left: 5,
        right: 19
      }
    }
  },
  mounted() {
    this.series = [
      [0, Number(this.report.sugarBreakfastBefore?.replace('mmol/L', ''))],
      [1, Number(this.report.sugarBreakfastAfter?.replace('mmol/L', ''))],
      [2, Number(this.report.sugarLunchBefore?.replace('mmol/L', ''))],
      [3, Number(this.report.sugarLunchAfter?.replace('mmol/L', ''))],
      [4, Number(this.report.sugarSupperBefore?.replace('mmol/L', ''))],
      [5, Number(this.report.sugarSupperAfter?.replace('mmol/L', ''))],
      [6, Number(this.report.sugarSleepBefore?.replace('mmol/L', ''))],
      [7, Number(this.report.sugarSleepAfter?.replace('mmol/L', ''))]
    ]
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.container {
  padding: 50px 24px 0 24px;
}
.card_nd_title {
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.card_content {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
.suger_title {
  color: #000;
  font-weight: bold;
  padding: 0 0 20px 20px;
  border-bottom: 1px solid #ccc;
}
</style>

